<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>the view html</title>
    <link rel="stylesheet" type="text/css" href="trail.css">
</head>
<body>
<main class="main">
    <nav>
        <a href="#">首页</a>
        <a href="#">个人信息</a>
        <a href="#">借阅图书</a>
        <a href="#">关于我们</a>
        <div class="animation" start-home></div>
    </nav>
    <div class="search">
        <input type="text" placeholder=" Why Not Search The Fonding Book Yourself!!" autofocus/>
        <span class="circle"></span>
        <span class="handle"></span>
    </div>
        <script src="index.js"></script>
      <section class="list-item">
        <div class="item-image">
            <img src="image/Computer Science.jpg" alt="picture_1">
        </div>
        <div class="item-text">
            <div class="text-title">Computer Science</div>
            <div class="text-desc">探索奇妙的「coding」世界</div>
        </div>
    </section>    <section class="list-item">
        <div class="item-image">
            <img src="image/art.jpg" alt="picture_2">
        </div>
        <div class="item-text">
            <div class="text-title">Art</div>
            <div class="text-desc"> 热爱 想象 创造</div>
        </div>
    </section>    <section class="list-item">
        <div class="item-image">
            <img src="image/humanity.jpg" alt="picture_3">
        </div>
        <div class="item-text">
            <div class="text-title">humanity</div>
            <div class="text-desc">纵观社会发展全貌</div>
        </div>
    </section>    <section class="list-item">
        <div class="item-image">
            <img src="image/medicine.jpg" alt="picture_4">
        </div>
        <div class="item-text">
            <div class="text-title">medicine</div>
            <div class="text-desc">生命与未来</div>
        </div>
    </section>
</main>
</body>
</html>